<template>
    <div class="box">
        <div class="app-container">
            <div class="top">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="130px" size="small">
                    <el-form-item label="发布日期" label-width="70px">
                        <el-date-picker size="small" @change="svdateChange" value-format="yyyy-MM-dd" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="场地">
                        <el-select v-model="formInline.region" placeholder="请选择">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label=" ">
                        <el-checkbox>发布修改</el-checkbox>
                    </el-form-item>

                    <el-form-item label=" ">
                        <el-button type="primary">一键发布</el-button>
                        <el-button type="primary">精确发布</el-button>
                        <el-button type="primary">重算</el-button>
                    </el-form-item>

                </el-form>
            </div>

            <div class="mt-2 top2">
                <div>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="130px" size="small">
                        <el-form-item label="场地" label-width="70px">
                            <el-select v-model="formInline.region" placeholder="请选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="科目">
                            <el-select v-model="formInline.region" placeholder="请选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="车型">
                            <el-select v-model="formInline.region" placeholder="请选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>


                        <el-form-item label=" " label-width="27px">
                            <el-button type="primary">查询</el-button>
                        </el-form-item>

                    </el-form>
                </div>
                <div>
                    <el-button type="primary" size="small ">可预订</el-button>
                    <el-button type="primary" size="small ">未发布</el-button>
                    <el-button type="primary" size="small "> 存在预订</el-button>
                    <el-button type="primary" size="small ">已订满</el-button>
                </div>
            </div>

            <div class="mt-1" style="max-height: 700px;height: 700px;">
                <el-table :data="tableData" height="100%">
                    <el-table-column prop="date" label="车辆" align="center">
                    </el-table-column>
                     <el-table-column prop="date" label="时段" align="center">
                        </el-table-column>
                    <el-table-column label="日期" align="center">
                        <el-table-column prop="name" label="1月" align="center">
                        </el-table-column>
                        <el-table-column prop="province" label="2月" align="center">
                        </el-table-column>
                        <el-table-column prop="city" label="3月" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="4月" align="center">
                        </el-table-column>
                        <el-table-column prop="zip" label="5月" align="center">
                        </el-table-column>
                        <el-table-column prop="zip" label="6月" align="center">
                        </el-table-column>
                        <el-table-column prop="zip" label="7月" align="center">
                        </el-table-column>
                        <el-table-column prop="zip" label="8月" align="center">
                        </el-table-column>
                        <el-table-column prop="zip" label="9月" align="center">
                        </el-table-column>
                        <el-table-column prop="zip" label="10月" align="center">
                        </el-table-column>
                        <el-table-column prop="zip" label="11月" align="center">
                        </el-table-column>
                        <el-table-column prop="zip" label="12月" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-11-28 16:33:28  星期二
* @description   练车排程
**/


export default {
    data() {
        return {
            formInline: {
                user: '',
                region: '',
            },
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-08',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }]
        }
    },
    methods: {
        svdateChange() { }
    }
}
</script>

<style lang="scss" scoped>
.top {
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdfe6;
}

.top2 {
    display: flex;
    justify-content: space-between;
}
</style>